<!DOCTYPE html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Auto Scheduling - Groups of connected tasks</title>
	<script src="../../codebase/dhtmlxgantt.js?v=7.0.7"></script>

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:regular,medium,thin,bold">
	<link rel="stylesheet" href="../../codebase/skins/dhtmlxgantt_material.css?v=7.0.7">
	<style>
		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}

		.weekend {
			background: #f4f7f4 !important;
		}

		.task_groups {
			background-color: orangered !important;
		}

		.task_groups .gantt_task_progress {
			background-color: red;
			opacity: 0.6;
		}
		.gantt_task_row.gantt_selected .weekend {
			background-color: #C0E8FF !important;
		}
	</style>
</head>

<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>

	gantt.plugins({
		auto_scheduling: true
	});

	gantt.templates.scale_cell_class = function (date) {
		if (!gantt.isWorkTime(date)) {
			return "weekend";
		}
	};
	gantt.templates.timeline_cell_class = function (item, date) {
		if (!gantt.isWorkTime({date: date, task: item})) {
			return "weekend";
		}
	};
	gantt.templates.rightside_text = function(start, end, task) {
		if (task.type === gantt.config.types.milestone)
			return task.text;
		return ""
	};

	gantt.config.work_time = true;
	gantt.config.min_column_width = 60;

	gantt.config.auto_scheduling = true;
	gantt.config.auto_scheduling_strict = true;

	gantt.config.date_format = "%d-%m-%Y";

	(function() {
		var highlightTasks = [],
			highlightSearch = {};

		function reset(value) {
			if (value) {
				if (value.join() === highlightTasks.join()) {
				    return;
				}
				highlightTasks = value;
				highlightSearch = {};
				highlightTasks.forEach(function(id){
					highlightSearch[id] = true;
				});
				gantt.render();
			}
			else if (highlightTasks.length) {
				highlightTasks = [];
				highlightSearch = {};
				gantt.render();
			}
		}

		gantt.templates.task_class = function(start, end, task) {
			if (highlightSearch[task.id])
				return "task_groups";
			return "";
		};

		gantt.attachEvent("onTaskClick", function(id) {
			var task = gantt.getTask(id);
			var group = gantt.getConnectedGroup(id);
			if(!group.tasks.length){
				reset();
			}else{
				reset(group.tasks);
				gantt.message({
					text: "<strong>Selected task:</strong> " + task.text +
						"<br><strong>Connected Group:</strong><br> " +
						group.tasks.map(function(t) { return gantt.getTask(t).text}).join("<br>"),
					expire: 5000
					}
				);
			}

			return true;
		});

		gantt.attachEvent("onEmptyClick", function() {
			reset();
			return true;
		});

	})();

	gantt.message({text:"Click any task to highlight the connected group", expire:-1});

	gantt.init("gantt_here");
	gantt.parse({
		data:[
			{id:11,text:"收集设备信息",start_date:"02-04-2018",duration:3,progress:0,open:true},
			{id:12,text:"开发设备管理系统",start_date:"03-04-2018",duration:3,progress:0,open:true},
			{id:13,text:"搭建设备数采环境",start_date:"05-04-2018",duration:3,progress:0,open:true},
			{id:14,text:"调研制造工艺",start_date:"10-04-2018",duration:3,progress:0,open:true},
			{id:15,text:"制造工艺信息化设计",start_date:"16-04-2018",duration:3,progress:0,open:true},
			{id:16,text:"开发能源管理系统",start_date:"16-04-2018",duration:3,progress:0,open:true},
			{id:17,text:"调研目前质量管理工作",start_date:"03-04-2018",progress:0,open:true,duration:4},
			{id:18,text:"质量管理可视化设计",start_date:"02-04-2018",duration:4,progress:0,open:true},
			{id:19,text:"现场看板设计",start_date:"02-04-2018",duration:4,progress:0,open:true}
			],
		links:[
			{source:"11",target:"12",type:"0"},
			{source:"11",target:"13",type:"0"},
			{source:"11",target:"14",type:"1"},
			{source:"14",target:"15",type:"0"},
			{source:"14",target:"16",type:"1"},
			{source:"17",target:"18",type:"0"},
			{source:"16",target:"17",type:"1"},
			{source:"17",target:"19",type:"1"},
		]
	});

</script>
</body>